import { withModifiers } from 'vue'
import { ElTable, ElTableColumn, ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem, ElIcon, ElImage, ElTag } from 'element-plus'
import moment from "moment";
import { formatDateRFC822 } from '@/utils/index.js'
import { TimeFormatType } from '../../../utils/constant';

// 按钮默认参数
const buttonConfig = {
    type: "primary",
    text: 'text',
    size: "small"
}

export const actionBarFn = function (data, row, emit) {
    if (!data) return console.error('操作拦配置数据为空！')
    if (!data instanceof Array && !data.length) return console.error('操作拦配置数据必须为数组！')
    // 给按钮添加默认样式
    const buttons = data.map(item => {
        for (let key in buttonConfig) {
            if (item.props.hasOwnProperty(key)) continue
            item.props[key] = buttonConfig[key]
        }
        return item
    })
    const handleButtonClick = (row, text) => {
        emit('handleActionBarEvent', row, text)
    }
    return handleSlotsDownMenu(data, row).map((item) => {
        if (item.hasOwnProperty('downMenus')) {
            return (
                <ElDropdown style="margin-left: 12px;" size="small" v-slots={handleDropdownItem(item.downMenus, row, emit)}>
                    <ElButton v-slots={item.text} size="small" icon="ArrowDown" type="primary" />
                </ElDropdown>
            )
        } else {
            return <ElButton {...item.props} v-hasPermi={item.props['hasPerm']} onClick={withModifiers(() => handleButtonClick(row, item.text), ['stop'])} v-slots={handleTextState(item.text, row || null)} />
        }
    })
}

export const dateFormatting = (currentColAttrs, row, type) => {
    let value = ''
    const time = row[currentColAttrs.prop]
    switch (type) {
        case TimeFormatType['RFC2822']:
            value = formatDateRFC822(time)
            break
        case TimeFormatType['UNIX']:
            value = moment(Number(time)).format('YYYY-MM-DD HH:mm');
            break
        default:
            value = moment(time).format('YYYY-MM-DD HH:mm')
    }
    // if(type === TimeFormatType['RFC2822']) {
    //     value = formatDateRFC822(row[currentColAttrs.prop])
    // }else {
    //     value = moment(row[currentColAttrs.prop]).format('YYYY-MM-DD HH:mm')
    // }

    return <div>{value}</div>
}



// 处理下拉菜单
const handleDropdownItem = (buttons, row, emit) => {

    const handleButtonClick = (row, text) => {
        emit('handleActionBarEvent', row, text)
    }

    return {
        dropdown: () => {
            return (
                <ElDropdownMenu>
                    {buttons.map((cells) => {
                        return (
                            <ElDropdownItem>
                                <ElButton
                                    {...cells.props}
                                    v-hasPermi={cells.props['hasPerm']}
                                    onClick={withModifiers(() => handleButtonClick(row, cells.text), ['stop'])}
                                    v-slots={handleTextState(cells.text, row || null)}
                                />
                            </ElDropdownItem>
                        )
                    })}
                </ElDropdownMenu>
            )
        },
    }
}

// 操作拦按钮根据传过来的参数来显示不同文字
function handleTextState(text, row) {
    if (typeof text === 'string') return text
    else return text.buttonArr.find((item) => item.status === row[text.stateName]).label
}

/**
 * 按钮超过3个新增更多按钮
 * @param {*} data
 * @param {*} row
 * @returns
 */
const handleSlotsDownMenu = (data, row) => {
    // 判断按钮是否带有hidden参数，如果有则判断根据什么参数来控制显示隐藏
    const buttons = data.filter((button) => {
        if (button.hasOwnProperty('hidden')) {
            // hidden方法返回的结果
            let showFun = true
            // hidden参数放回的结果
            let hidden
            // 盘点是有携带hidden方法
            if (button.hasOwnProperty('showFun')) {
                showFun = button.showFun(row)
            }
            // hidden 是一个数组的时候
            if (button.hidden instanceof Array && button.hidden.length) {
                const result = button.hidden.find((item) => {
                    return buttonStatusFilter(item.status, row[item.prop], item.revert)
                })
                result ? hidden = false : hidden = true
            } else {
                const { status, prop, revert } = button.hidden
                buttonStatusFilter(status, row[prop], revert) ? hidden = false : hidden = true
            }
            // showFun 则必须满足
            return showFun && hidden
        } else {
            return button
        }
    })
    if (buttons.length <= 3) return buttons
    const outButtons = buttons.filter((item, index) => index < 2)
    const innerButtons = {
        text: '更多',
        downMenus: buttons.filter((item, index) => index >= 2),
    }
    outButtons.push(innerButtons)

    return outButtons
}

/**
 * 判断status的值是否和row的值对应
 * @param {*} data
 * @param {*} value
 * @param {*} revert
 * @returns Boolean
 */
const buttonStatusFilter = (data, value, revert) => {
    if (!revert) {
        // 数组
        if (data instanceof Array && data.length) {
            return data.includes(value)
        }
        // 值
        return data === value
    } else {
        // 数组
        if (data instanceof Array && data.length) {
            return !data.includes(value)
        }
        // 值
        return data !== value
    }
}
